<template>
  <div class="form-input-container" v-if="!isFinish && !props.selectedContent">
    <div class="card-title">
      {{ props.title }}
    </div>
    <div class="form-input-box">
      <div class="form-input-text">
        <input
          maxlength="-1"
          v-model="text"
          :class="['form-input', isH5 ? 'form-input-h5' : '']"
          :placeholder="TUITranslateService.t('AIDesk.请输入内容')"
        >
        <div v-if="validator" class="validator-line">
          {{ TUITranslateService.t("AIDesk.请填写必填项") }}
        </div>
      </div>
      <div @click="submitForm()" class="submit-icon">
        <Icon :src="iconSend" width="30px" height="30px"/>
      </div>
    </div>
  </div>
  <div class="form-finish-container" v-else-if="isFinish || props.selectedContent">
    <div class="card-title">
      <div>
        {{ props.title }}
      </div>
      <div class="form-finish-title-right">
        <Icon :src="iconSucess" style="margin:0px 4px"/>
        {{ TUITranslateService.t("AIDesk.已提交") }}
      </div>
    </div>
    <div>
      {{ props.selectedContent || text }}
    </div>
  </div>
</template>

<script lang="ts">
import vue from '../../../../../../../adapter-vue';
import iconForm from '../../../../../../../assets/icon_form.png';
import Icon from '../customer-icon.vue';
import iconSucess from '../../../../../../../assets/icon_success.png';
import iconSend from '../../../../../../../assets/send_button_h5.svg';
import { TUITranslateService } from '../../../../../../../@aidesk/uikit-engine';
import { isH5 } from '../../../../../../../utils/env';
const { ref } = vue;

interface Props {
  title: string;
  selectedContent: string;
}
export default {
  components: {
    Icon,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    selectedContent: {
      type: String,
      default: '',
    },
  },
  emits: ['input-submit'],
  setup(props: Props, { emit }) {
    const disabled = ref<boolean>(false);
    const text = ref<string>('');
    const isShowForm = ref<boolean>(false);
    const isFinish  = ref<boolean>(false);
    const validator = ref<boolean>(false);

    const showForm = (): void => {
      isShowForm.value = true;
    }

    const submitForm = (): void => {
      if (text.value.trim() === '') {
        validator.value = true;
        return;
      }
      emit('input-submit', text.value);
      isFinish.value = true;
      validator.value = false;
    }

    return {
      disabled,
      text,
      props,
      iconForm,
      isShowForm,
      showForm,
      iconSucess,
      iconSend,
      isFinish,
      TUITranslateService,
      submitForm,
      validator,
      isH5,
    };
  },
};
</script>
<style lang="scss">
.form-container {
  display:flex;
  .right-container {
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    .form-button {
      background-color: #1c66e5;
      display: flex;
      color: #ffffff;
      padding: 4px 12px;
      border-radius: 20px;
      justify-content: center;
    }
  }
}
.form-input-container {
  .card-title {
    font-size:14px;
    margin-bottom: 8px;
  }

  .form-input-box {
    display: flex;
    gap: 5px;
    button:disabled {
      background: #d8d8d8;
    }
    .form-input-text {
      display:flex;
      flex:1;
      flex-direction: column;
      min-width: 200px;
    }
    .form-input {
      flex: 1;
      height: 27px;
      border-radius: 8px;
      border: 1px solid #d8d8d8;
    }
    .form-input-h5 {
      background: #d8d8d8;
    }
  }

  .form-button {
    position: relative;
    height: 40px;
    width: 42px;
    font-size: 16px;
    border-radius: 0 8px 8px 0;
    border: 0 rgba(221, 221, 221, 1) solid;
    background: #006eff;
    color: white;
    cursor: pointer;
  }

  .form-button::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    right: 40%;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(0, -50%) rotate(-135deg);
  }
}

.form-finish-container {
  .card-title {
    display:flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: flex-start;
  }
  .form-finish-title-right {
    display: flex;
    word-break: keep-all;
  }
}
.validator-line {
  font-size: 12px;
  color: #e54545;
  margin-top: 3px;
}
.submit-icon {
  cursor: pointer;
}
</style>
